<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader title="权限信息" hidden-breadcrumb/>
        </div>
        <!--    公共筛选查询区域-->
        <Card :bordered="false" dis-hover>
            <!--筛选查询条件区域-->
            <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
                <Row :gutter="24" type="flex" justify="end">
                    <Col v-bind="grid">
                        <FormItem label="状态：">
                            <Select v-model="data.status" placeholder="请选择">
                                <Option :value="0">禁用</Option>
                                <Option :value="1">启用</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col v-bind="grid">
                        <FormItem label="角色名称：" >
                            <Input v-model="data.roleName" placeholder="请输入关键字"/>
                        </FormItem>
                    </Col>
                    <Col v-bind="grid" class="ivu-text-right">
                        <FormItem>
                            <Button type="primary" @click="getData">查询</Button>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <!--新增-->
            <div class="buttonContain">
                <Button @click="handleOpenCreate" type="primary" >新增</Button>
            </div>
        </Card>
        <!--数据渲染区域-->
        <div class="i-table-no-border">
            <Table
                    ref="table"
                    :columns="columnslist"
                    :data="dataWithPage"
                    :loading="loading"
            >
               <!-- <template slot-scope="{ row }" slot="status">
                    <Switch v-model="row.status"
                            :before-change="handleBeforeChange"
                    />
                </template>-->
                    <template slot-scope="{ row }" slot="status">
                        <Badge v-if="row.status === '0'" status="error" text="禁用"  />
                        <Badge v-if="row.status === '1'" status="success" text="启用" />
                    </template>
                <!--数据范围（1：全部数据权限 2：自定数据权限 3：本部门数据权限 4：本部门及以下数据权限）-->
                <template slot-scope="{ row }" slot="dataScope">
                    <span v-if="row.dataScope === '1'">全部数据权限</span>
                    <span v-if="row.dataScope === '2'">本部门数据权限</span>
                    <span v-if="row.dataScope === '3'">本部门及以下数据权限</span>
                    <span v-if="row.dataScope === '4'">仅本人数据权限</span>
                </template>
                <template slot-scope="{ row}" slot="action">
                    <a @click="showDetail(row.roleId)">详情</a>
                    <Divider type="vertical"/>
                    <a @click="handleEdit(row.roleId)" :style="{'color':'#4AABF2'}">编辑</a>
                    <Divider type="vertical"/>
                    <a @click="handleDelete(row.roleId)" :style="{'color':'red'}">删除</a>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
                <Page :total="limitData.length" show-elevator :current.sync="current" show-total/>
            </div>

        </div>
        <Modal v-model="showCreate" title="添加角色" @on-ok="handleCreate" width="800" :loading="creating">
            <Form ref="create" :model="createData" :rules="createRules"  :label-width="120">
                <FormItem label="角色名称：" prop="roleName">
                    <Input type="text" v-model="createData.roleName" placeholder="请输入角色名称"/>

                </FormItem>
                <FormItem label="权限字符："  prop="roleKey">
                    <Input type="text" v-model="createData.roleKey" placeholder="请输入权限字符"/>

                </FormItem>
                <FormItem label="状态："  prop="status" label-for="status">
                    <RadioGroup v-model="createData.status" element-id="status">
                        <Radio label="0">禁用</Radio>
                        <Radio label="1">启用</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="权限范围："  prop="dataScope">
                    <Select v-model="createData.dataScope" placeholder="请选择" style="width:50%">
                        <Option value="1">全部数据权限</Option>
                        <Option value="2">本部门数据权限</Option>
                        <Option value="3">本部门及以下数据权限</Option>
                        <Option value="4">仅本人数据权限</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>
    </div>

</template>

<script>
    import {mapState} from 'vuex';
    import Employee from "@/api/Employee"

    export default {
        data() {
            return {
                grid: {
                    xl: 8,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                showCreate: false,
                creating: true,
                //验证规则
                createRules: {
                    roleName: [
                        {required: true, message: '角色名称', trigger: 'blur'}
                    ],
                    roleKey: [
                        {required: true, message: '权限字符', trigger: 'blur'}
                    ],
                    status: [
                        {required: true, message: '状态', trigger: 'change'}
                    ],
                    dataScope: [
                        {required: true, message: '权限范围', trigger: 'change'}
                    ],

                },
                editId:'',
                updateIndex: -1,
                showCreate: false,
                switch1: false,
                data: {
                    status:null,
                    roleName: null,
                },
                createData: {
                    roleName: '',
                    roleKey: '',
                    status: '',
                    dataScope: "",
                },
                //验证规则
                rules: {},
                dayak: [],
                count: 10,
                current: 1,
                list: [],
                size: 10,
                datalist: [],
                columnslist: [
                    {
                        title: '角色编号',
                        key: 'roleId',
                    },
                    {
                        title: '角色名称',
                        key: 'roleName',

                    },
                    {
                        title: '权限字符',
                        key: 'roleKey',
                    },
                    {
                        title: '权限范围',
                        slot: 'dataScope',
                        minWidth: 100
                    },
                    {
                        title: '状态',
                        slot: 'status'
                    }, {
                        title: '创建时间',
                        key: 'createTime',
                        minWidth: 80
                    },

                    {
                        title: '操作',
                        slot: 'action',
                        align: 'center',
                        minWidth: 140
                    }
                ],
                loading: false,
            }
        },
        computed: {
            limitData() {
                let data = [...this.list];
                return data;
            },
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth() {
                return this.isMobile ? undefined : 100;
            },
            labelPosition() {
                return this.isMobile ? 'top' : 'right';
            },
            // 因为要动态计算总页数，所以还需要一个计算属性来返回最终给 Table 的 data
            dataWithPage() {
                const data = this.limitData;
                const start = this.current * this.size - this.size;
                const end = start + this.size;
                return [...data].slice(start, end);
            },
        },
        created() {
            this.getData();
        },
        methods: {
            handleBeforeChange(status) {
                return new Promise((resolve) => {
                    this.$Modal.confirm({
                        title: '切换确认',
                        content: '您确认要切换开关状态吗？',
                        onOk: () => {
                            resolve();
                        }
                    });
                });
            },
            /* change (status,index) {
                 this.switch1 = !this.switch1;
                 this.$Message.info('开关状态：' + status);
             },*/
            //调用数据
            getData() {

                this.current = 1;
                this.loading = true;
                //调接口
                Employee.findByPage({
                    status:this.data.status,
                    roleName:this.data.roleName
                })
                    .then(res => {
                        // 返回数据
                        this.list = res;
                        this.loading = false;
                        this.data.status = ''
                        this.data.roleName = ''
                    })
                    .catch(err => {
                        // 异常情况
                    })
            },
            handleSubmit() {
                this.$emit('on-submit', this.data);
            },
            handleReset() {
                this.$refs.form.resetFields();
                this.$emit('on-reset');
            },
            /*新增*/
            handleOpenCreate() {
                this.createData.roleKey = '';
                this.createData.status = '';
                this.createData.dataScope = '';
                this.updateIndex = -1;
                this.showCreate = true;
            },
            //编辑
            handleEdit(roleId) {
                this.editId = roleId;
                Employee.selectById({
                    roleId
                })
                    .then(res => {
                        // 返回数据
                        this.createData = res;
                    })
                    .catch(err => {
                        // 异常情况
                    })
                this.updateIndex = 11;
                this.showCreate = true;
            },
            // 新增数据
            handleCreate() {
                this.$refs.create.validate((valid) => {
                    if (valid) {
                        if (this.updateIndex < 0) {
                            // 新建
                            Employee.addRole({
                                status:this.createData.roleName,
                                roleKey:this.createData.roleKey,
                                status:this.createData.status,
                                dataScope:this.createData.dataScope,
                            })
                                .then(res => {
                                    // 返回数据
                                    this.$Message.success('创建成功');
                                    this.getData();
                                })
                                .catch(err => {
                                    // 异常情况
                                })

                        } else {
                            // 修改
                            Employee.update({
                                roleId:this.editId,
                                status:this.createData.roleName,
                                roleKey:this.createData.roleKey,
                                status:this.createData.status,
                                dataScope:this.createData.dataScope,
                            })
                                .then(res => {
                                    // 返回数据
                                    this.$Message.success('修改成功');
                                    this.getData();
                                })
                                .catch(err => {
                                    // 异常情况
                                })

                        }

                        this.showCreate = false;
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    } else {
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    }
                });

            },
            // 详情
            showDetail(roleId) {
                this.$router.push({
                    path: '/employee/authority/authority-detail',
                    name: 'authority-detail',
                    query: {
                        roleId
                    }
                });
            },

            //删除
            handleDelete(roleId) {
                this.$Modal.confirm({
                    title: '删除',
                    content: '确定删除吗？',
                    onOk: () => {
                        Employee.deleteById({
                            roleId
                        })
                            .then(res => {
                                // 返回数据
                                this.$Message.success('删除成功');
                                this.getData();
                            })
                            .catch(err => {
                                // 异常情况
                                this.$Message.error('删除失败');
                            })
                    }
                });
            }
        },
    }
</script>


<style lang="less" scoped>
    .buttonContain {
        > button {
            width: 120px;
            height: 40px;
            font-size: 16px;
        }
    }

</style>
